<template>
	<view class="city">
		<wd-picker use-default-slot :placeholder="props.placeholder" value-key="code" label-key="name"
			@confirm="pickerConfirm" :column-change="columnChange" custom-class="city-picker" :columns="columns"
			v-model="value">
			<view class="placeholder" v-if="selected.length <= 0">{{ props.placeholder }}</view>
			<view class="value" v-else>
				<view v-for="(item, index) in selected" :key="index">
					{{ item.name }}
					<text v-if="index < selected.length - 1">></text>
				</view>
			</view>
		</wd-picker>
	</view>
	<view class="city-picker__error-message">{{ errorMessage }}</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue';
	import { getProvinceList, getCityList } from '@/api/index';
	import { FORM_KEY } from '@/uni_modules/wot-design-uni/components/wd-form/types'
	import { useParent } from '@/uni_modules/wot-design-uni/components/composables/useParent'
	interface Props {
		modelValue ?: string | Array<any>;
		prop ?: string;
		placeholder ?: string;
	}
	interface Emits {
		(e : 'update:modelValue', value : string | Array<any>) : void;
	}

	const emits = defineEmits<Emits>();
	const props = withDefaults(defineProps<Props>(), {
		modelValue: () => [],
		placeholder: '请选择内容',
		prop: "",
	});
	const { parent: form } = useParent(FORM_KEY)
	const columns : any = ref([]);
	const tempValue : any = ref([]);
	const value : any = ref([]); // 选中的值，格式为"省 市"
	const selected : any = ref([]); // 选中的值，格式为"省 市"的中文名，用于显示在页面上
	const pickerConfirm = (e : any) => {
		if (e.value.length > 1) {
			tempValue.value = e.value;
			value.value = e.value;
			selected.value = e.selectedItems;
		}
		emits('update:modelValue', value.value[value.value.length - 1]); // 返回选中的值，格式为"省 市"
	};
	const columnChange = (e) => {
		const valuse = e.getValues();
		if (valuse[0] !== tempValue.value[0]) {
			getCity(valuse[0]);
			tempValue.value[0] = valuse[0];
		}
	};
	const getCity = (code : string) => {
		getCityList({
			province_code: code
		}).then((res : any) => {
			columns.value[1] = res;
			tempValue.value[1] = res[0].code; // 默认选中第一项
		});
	};
	// 表单校验错误信息
	const errorMessage = computed(() => {

		if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
			return form.errorMessages[props.prop]
		} else {
			return ''
		}
	})
	onMounted(() => {
		console.log("111")
		console.log(form)
		console.log(props)
		getProvinceList().then((res : any) => {
			columns.value[0] = res;
			tempValue.value = [res[0].code]; // 默认选中第一项
			getCity(res[0].code);
		});
	});
</script>
<style lang="scss" scoped>
	@import "@/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss";
	@import "@/uni_modules/wot-design-uni/components/common/abstracts/variable.scss";

	.city-picker__error-message {
		color: $-form-item-error-message-color;
		font-size: $-form-item-error-message-font-size;
		line-height: $-form-item-error-message-line-height;
		text-align: left;
		vertical-align: middle;
	}
</style>
<style lang="less">
	.city {
		height: 44px;
		line-height: 44px;
		padding: 0 24rpx;
		border-radius: 14rpx;
		font-family: UICTFontTextStyleBody;
		overflow: hidden;
		text-overflow: clip;
		white-space: nowrap;
		outline: none;
		box-sizing: border-box;
		background-color: #FFF;

		.city-picker {
			height: 44px;

			:deep(.wd-picker__field) {
				height: 44px !important;
			}
		}

		.placeholder {
			font-size: 14px;
			color: #7d7d7d;
		}

		.value {
			font-size: 14px;
			display: flex;

			>view {
				margin-right: 10rpx;
			}
		}
	}
</style>